html,
body {
    position: relative;
    height: 100%;
}
.swiper-container {
    display: block;
    width: 100%;
    height: 100%;
    background: url("../../images/bg.png") no-repeat;
    background-size: 100%;
}
@-webkit-keyframes showperson {
    0% {
        -webkit-transform: translateY(-10%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        opacity: 1;
    }
}
@keyframes showperson {
    0% {
        transform: translateY(-10%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes fireFadeIn {
    0% {
        opacity: 1;
        transform: scale(0);
        -webkit-transform: scale(0);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.3);
        -webkit-transform: scale(1.3);
    }
}
@keyframes fireFadeIn {
    0% {
        opacity: 1;
        transform: scale(0);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.3);
    }
}
@-webkit-keyframes rock {
    0%,
    100% {
        transform: translate(0,0);
        -webkit-transform: translate(0,0);
    }
    25% {
        transform: translate(5%,10%);
        -webkit-transform: translate(5%,10%);
    }
    50% {
        transform: translate(0,0);
        -webkit-transform: translate(0,0);
    }
    75% {
        transform: translate(-10%,5%);
        -webkit-transform: translate(-10%,5%);
    }
}
@keyframes rock {
    0%,
    100% {
        transform: translate(0,0);
    }
    25% {
        transform: translate(5%,10%);
    }
    50% {
        transform: translate(0,0);
    }
    75% {
        transform: translate(-10%,5%);
    }
}
@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@-moz-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -moz-transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}
@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@-moz-keyframes fadeInRight {
    0% {
        opacity: 0;
        -moz-transform: translateX(20px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
@-moz-keyframes fadeInUp {
    0% {
        opacity: 0;
        -moz-transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@-moz-keyframes pulse {
    0% {
        -moz-transform: scale(1);
    }
    50% {
        -moz-transform: scale(1.1);
    }
    100% {
        -moz-transform: scale(1);
    }
}

@keyframes scaleTime {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(359deg)
    }
}
@-webkit-keyframes scaleTime {
    0% {
        -webkit-transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(359deg)
    }
}
@-webkit-keyframes uforock {
    0%,
    40%,
    100% {
        -webkit-transform:translateY(0);
    }
    20%,
    60% {
        -webkit-transform:translateY(-10%);
    }
    80% {
        -webkit-transform: translateY(-5%);
    }
}
@keyframes uforock {
    0%,
    40%,
    100% {
        transform: translateY(0);
    }
    20%,
    60% {
        transform: translateY(-10%);
    }
    80% {
        transform: translateY(-5%);
    }
}
.swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
//  min-height: px2rem(1206);
    padding-top: px2rem(70);
    text-align: center;
    overflow: hidden;
    p {
        color: #fff;
        font-size: px2rem(30);
        margin-bottom: px2rem(40);
    }
    .words-img {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        display: block;
        margin: auto;
        z-index: 2;
        opacity: 0;
    }
    .person-img {
        position: absolute;
        display: block;
        margin: auto;
        opacity: 0;
        z-index: 20;
    }
    &.swiper-slide-active {
        .words-img {
            -webkit-animation: fadeIn 0.1s ease 1s forwards;
        }
        .person-img {
            -webkit-animation: showperson 0.1s ease 1s forwards;
        }
    }
    &.page1 {
        &.swiper-slide-active {
            .book-img {
                -webkit-animation: fadeIn 0.1s ease 1s forwards;
            }
            .house-img {
                -webkit-animation: fadeIn 0.1s ease 1s forwards;
            }
        }
        .book-img {
            display: block;
            margin: auto;
            width: px2rem(332);
            height: px2rem(463);
            opacity: 0;
        }
        .words-img {
            bottom: px2rem(530);
            width: px2rem(465);
            height: px2rem(168);
        }
        .house-img {
            position: absolute;
            display: block;
            width: px2rem(307);
            height: px2rem(189);
            right: 50%;
            bottom: px2rem(150);
            transform: translateX(80%);
            -webkit-transform: translateX(80%);
            z-index: 1;
            opacity: 0;
        }
        .person-img {
            width: px2rem(203);
            height: px2rem(384);
            margin-left: px2rem(-266);
            left: 50%;
            bottom: px2rem(110);
        }
    }
    &.page2 {
        &.swiper-slide-active {
            .time-img {
                -webkit-animation: fadeIn 0.1s ease 1s forwards;
            }
            .time-s {
                -webkit-animation: scaleTime 2s linear infinite;
            }
        }
        p {
            margin-bottom: px2rem(60);
            .name,
            .days {
                color: #ff3434;
            }
            .days {
                font-size: px2rem(48);
                padding: 0 px2rem(20);
            }
        }
        .words-img {
            bottom: px2rem(566);
            margin-top: px2rem(166);
            width: px2rem(348);
            height: px2rem(103);
        }
        .person-img {
            width: px2rem(196);
            height: px2rem(422);
            left: 50%;
            margin-left: px2rem(30);
            bottom: px2rem(90);
        }
        .time-img {
            position: absolute;
            display: block;
            width: px2rem(240);
            height: px2rem(240);
            left: 50%;
            margin-left: px2rem(-240);
            bottom: px2rem(140);
            opacity: 0;
            background: url(../../images/time-bg.png) no-repeat;
            background-size: 100% 100%;
            .time-s {
                display: block;
                width: px2rem(240);
                height: px2rem(240);
                margin-left: px2rem(2);
            }
        }
        
    }
    &.page3 {
        &.swiper-slide-active {
            .fans-tips {
                -webkit-animation: showperson 0.6s ease 1s forwards;
            }
            .fans {
                &.f1 {
                    -webkit-animation: showperson 0.6s ease 1s forwards;
                }
                &.f2 {
                    -webkit-animation: showperson 0.2s ease 1s forwards;
                }
                &.f3 {
                    -webkit-animation: showperson 0.4s ease 1s forwards;
                }
                &.f4 {
                    -webkit-animation: showperson 0.8s ease 1s forwards;
                }
            }
        }
        p {
            margin-bottom: px2rem(60);
            &.date-time {
                color: #FF3434;
            }
            .point {
                color: #FF3434;
                font-size: px2rem(48);
            }
            .nickname {
                color: #FF3434;
            }
        }
        .person-img {
            width: px2rem(194);
            height: px2rem(423);
            left: 50%;
            margin-left: px2rem(-100);
            bottom: px2rem(120);
        }
        .words-img {
            left: 50%;
            transform: translateX(40%);
            -webkit-transform: translateX(40%);
            bottom: px2rem(358);
            width: px2rem(238);
            height: px2rem(220);
        }
        .fans-tips {
            position: absolute;
            display: block;
            left: 50%;
            width: px2rem(122);
            height: px2rem(109);
            z-index: 20;
            bottom: px2rem(354);
            opacity: 0;
            -webkit-opacity: 0;
            margin-left: px2rem(-260);
        }
        .fans {
            position: absolute;
            display: block;
            left: 50%;
            z-index: 20;
            opacity: 0;
            -webkit-opacity: 0;
            &.f1 {
                width: px2rem(115);
                height: px2rem(206);
                bottom: px2rem(130);
                margin-left: px2rem(-170);
            }
            &.f2 {
                width: px2rem(139);
                height: px2rem(216);
                bottom: px2rem(70);
                margin-left: px2rem(-320);
            }
            &.f3 {
                width: px2rem(130);
                height: px2rem(202);
                bottom: px2rem(50);
                margin-left: px2rem(200);
            }
            &.f4 {
                width: px2rem(110);
                height: px2rem(162);
                bottom: px2rem(132);
                margin-left: px2rem(100);
            }
        }
    }
    &.page4 {
        &.swiper-slide-active {
            .sale-info {
                -webkit-animation: fadeIn 0.1s ease 1s forwards;
            }
            .man {
                &.m1 {
                    -webkit-animation: fadeInLeft 0.2s 0.2s ease both;
                }
                &.m2 {
                    -webkit-animation: fadeInRight 0.6s 0.2s ease both;
                }
            }
            .heart {
                &.h1 {
                    -webkit-animation: fadeInUp 1.8s 0.2s ease both;
                }
                &.h2 {
                    -webkit-animation: fadeInUp 1.4s 0.2s ease both;
                }
                &.h3 {
                    -webkit-animation: fadeInUp 1s 0.2s ease both;
                }
            }
        }
        p {
            margin-bottom: px2rem(60);
            &.date-time {
                color: #FF3434;
            }
            &.amount {
                color: #FF3434;
                font-size: px2rem(48);
            }
        }
        .sale-info {
            margin: auto;
            display: flex;
            width: px2rem(640);
            height: px2rem(246);
            opacity: 0;
            -webkit-opacity: 0;
            background: url("../../images/salebg.png") no-repeat;
            background-size: 100% 100%;
            align-items: center;
            display: -webkit-flex;
            -webkit-align-items: center;
            img {
                display: block;
                width: px2rem(252);
                height: px2rem(199);
//              margin: 0 px2rem(30);
            }
            .info {
                flex: 1;
                -webkit-flex: 1;
                display: block;
                padding: px2rem(60) px2rem(30) px2rem(40);
                p {
                    font-size: px2rem(24);
                    color: #4d5db9;
                    text-align: left;
                    margin-bottom: 0;
                    height: px2rem(30);
                    line-height: px2rem(30);
                    &.name {
                        height: px2rem(70);
                        line-height: px2rem(40);
                        margin-bottom: px2rem(20);
                        overflow: hidden;
                        word-break: break-all;
                    }
                    &.amount {
                        margin-bottom: px2rem(26);
                    }
                }
            }
        }
        .words-img {
            bottom: px2rem(428);
            left: 50%;
            width: px2rem(300);
            height: px2rem(87);
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
        }
        .man {
            position: absolute;
            bottom: 0;
            display: block;
            opacity: 0;
            z-index: 20;
            left: 50%;
            &.m1 {
                width: px2rem(266);
                height: px2rem(381);
                margin-left: px2rem(-330);
            }
            &.m2 {
                width: px2rem(259);
                height: px2rem(361);
                margin-left: px2rem(70);
            }
        }
        .heart {
            position: absolute;
            bottom: px2rem(218);
            left: 50%;
            opacity: 0;
            display: block;
            z-index: 20;
            &.h1 {
                width: px2rem(73);
                height: px2rem(67);
                bottom: px2rem(338);
                margin-left: px2rem(-50);
            }
            &.h2 {
                width: px2rem(48);
                height: px2rem(44);
                bottom: px2rem(260);
                transform: rotate(-20deg);
                -webkit-transform: rotate(-20deg);
            }
            &.h3 {
                width: px2rem(32);
                height: px2rem(28);
                margin-left: px2rem(40);
            }
        }
    }
    &.page5 {
        &.swiper-slide-active {
            .happy-img {
                -webkit-animation: showperson 0.1s ease 1s forwards;
            }
            .bad-img {
                &.bad1 {
                    -webkit-animation: fadeInUp 0.1s 0.2s ease both;
                }
                &.bad2 {
                    -webkit-animation: fadeInUp 0.2s 0.2s ease both;
                }
                &.bad3 {
                    opacity: 1;
                    -webkit-opacity: 1;
                    -webkit-animation: rock 3s linear infinite;
                }
            }
        }
        p {
            margin-bottom: px2rem(60);
            &.date-time {
                span {
                    color: #ff3434;
                }
            }
            &.amount {
                color: #ff3434;
                font-size: px2rem(48);
            }
            &.order-num {
                span {
                    color: #ff3434;
                    font-size: px2rem(48);
                }
            }
        }
        .gift-img {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: px2rem(398);
            background: url("../../images/gift-bg.png") no-repeat;
            background-size: 100% 200%;
            &.bad {
                background-position: 0 100%;
            }
        }
        .words-img {
            position: absolute;
            left: 50%;
            bottom: px2rem(486);
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            width: px2rem(334);
            height: px2rem(88);
            &.bad {
                width: px2rem(360);
                height: px2rem(110);
            }
        }
        .happy-img {
            position: absolute;
            width: px2rem(334);
            height: px2rem(442);
            bottom: 0;
            left: 50%;
            margin-left: px2rem(-170);
            z-index: 20;
            opacity: 0;
            -webkit-opacity: 0;
        }
        .bad-img {
            position: absolute;
            left: 50%;
            z-index: 20;
            opacity: 0;
            -webkit-opacity: 0;
            &.bad1 {
                margin-left: px2rem(-150);
                bottom: px2rem(24);
                width: px2rem(219);
                height: px2rem(422);
            }
            &.bad2 {
                margin-left: px2rem(-340);
                bottom: px2rem(75);
                width: px2rem(164);
                height: px2rem(136);
            }
            &.bad3 {
                margin-left: px2rem(240);
                bottom: px2rem(219);
                width: px2rem(102);
                height: px2rem(84);
            }
        }
    }
    &.nosale {
        &.swiper-slide-active {
            .fireworks {
                .fw1 {
                    -webkit-animation: fireFadeIn 2.5s 1s linear infinite;
                }
                .fw2 {
                    -webkit-animation: fireFadeIn 2.5s 2s linear infinite;
                }
                .fw3 {
                    -webkit-animation: fireFadeIn 2.5s 3s linear infinite;
                }
            }
        }
        p {
            margin-bottom: px2rem(60);
            &.thks {
                font-size: px2rem(48);
                color: #f8d218;
            }
        }
        text-align: center;
        .fireworks {
            position: relative;
            display: block;
            margin: auto;
            width: px2rem(480);
            height: px2rem(260);
            img {
                position: absolute;
                top: px2rem(0);
                left: 50%;
                margin-left: px2rem(-100);
            }
            .fw1,
            .fw11 {
                position: absolute;
                top: px2rem(-30);
                left: 50%;
                margin-left: px2rem(-100);
                width: px2rem(100);
                height: px2rem(90);
            }
            .fw2 {
                top: px2rem(35);
                margin-left: px2rem(-200);
                width: px2rem(150);
                height: px2rem(140);
            }
            .fw3 {
                top: px2rem(10);
                margin-left: px2rem(-60);
                width: px2rem(248);
                height: px2rem(230);
            }
        }
        .ticket-tips {
            color: #f8d218;
            margin-bottom: px2rem(46);
        }
        .ticket {
            display: flex;
            display: -webkit-flex;
            margin: auto;
            width: px2rem(730);
            height: px2rem(200);
            background: url("../../images/ticket-bg.png") no-repeat;
            background-position: 0 0;
            background-size: 100% 200%;
            padding: px2rem(40) 0 px2rem(40) px2rem(40);
            &.dis {
                background-position: 0 100%;
            }
            .value {
//              flex: 1;
//              -webkit-flex: 1;
                margin-top: px2rem(20);
                font-size: px2rem(100);
                color: #944600;
                width: px2rem(420);
                text-align: left;
                span {
                    margin-left: px2rem(14);
                    color: #ffe58c;
                }
            }
            .info {
                width: px2rem(260);
                margin-top: px2rem(20);
//              margin-left: px2rem(30);
                p {
                    margin: 0;
                    text-align: left;
                    margin-bottom: px2rem(30);
                    font-size: px2rem(20);
                    overflow: hidden;
                    height: px2rem(30);
                    &.man-jian {
                        font-size: px2rem(30);    
                    }
                }
            }
            .got {
//              
                width: px2rem(350);
                .icon {
//                  margin-left: px2rem(55);
                    margin: auto;
                    margin-top: px2rem(-35);
                    display: block;
                    width: px2rem(190);
                    height: px2rem(190);
                    z-index: 2;
                    background: url("../../images/getstatus-icons.png") no-repeat;
                    background-position: 0 67%;
                    background-size: 100% 400%;
                    &.got {
                        background-position: 0 0;
                    }
                    &.overdue {
                        background-position: 0 33.3%;
                    }
                    &.nobind {
                        background-position: 0 100%;
                    }
                }
            }
        }
        .ticket-address {
            margin-top: px2rem(40);
        }
        .share,
        .download {
            display: block;
            position: absolute;
            width: px2rem(480);
            height: px2rem(98);
            line-height: px2rem(98);
            bottom: px2rem(166);
            left: 50%;
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            background-color: #69f;
            color: #fff;
            z-index: 20;
            -webkit-border-radius: px2rem(50);
            -moz-border-radius: px2rem(50);
            border-radius: px2rem(50);
            font-size: px2rem(30);
        }
        .download {
            background-color: #f63;
            bottom: px2rem(46);
        }
    }
    &.page6 {
        &.swiper-slide-active {
            .ufo {
                -webkit-animation: uforock 5s infinite;
            }
        }
        p {
            .type-name {
                font-size: px2rem(48);
                color: #ff3434;
            }
        }
        .ufo {
            position: absolute;
            bottom: px2rem(246);
            left: 50%;
            margin-left: px2rem(-210);
            display: block;
            padding-top: px2rem(60);
            font-size: px2rem(36);
            color: #083a59;
            text-align: center;
            width: px2rem(420);
            height: px2rem(235);
            background: url("../../images/ufo.png") no-repeat;
            background-size: 100% 100%;
        }
    }
    &.page7.swiper-slide-active {
        p {
            margin-bottom: px2rem(50);
            span {
                color: #ff4433;
                &.amount {
                    font-size: px2rem(48);
                }
            }
        }
        .person-img {
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: px2rem(-280);
            width: px2rem(313);
            height: px2rem(513);
        }
        .invoice-bg {
            margin: px2rem(90) auto auto;
            width: px2rem(661);
            height: px2rem(321);
            background: url("../../images/invoice-bg.png") no-repeat;
            background-size: 100% 100%;
            padding: px2rem(56) px2rem(56) px2rem(32);
            p {
                margin: 0;
                text-align: left;
                color: #6584c2;
                &.name {
                    margin-bottom: px2rem(26);
                    height: px2rem(100);
                    line-height: px2rem(50);
                    overflow: hidden;
                    word-break: break-all;
                }
                &.num {
                    height: px2rem(30);
                    line-height: px2rem(30);
                    margin-bottom: px2rem(26);
                }
                &.amount {
                    font-size: px2rem(48);
                    color: #ff4433;
                }
            }
        }
        .words-img {
            position: absolute;
            bottom: px2rem(246);
            left: 50%;
            transform: translateX(20%);
            -webkit-transform: translateX(20%);
        }
    }
    &.page8 {
        &.swiper-slide-active {
            .you {
                &.y1 {
                    -webkit-animation: fadeIn 0.6s ease 1s forwards;
                }
                &.y2 {
                    -webkit-animation: fadeIn 0.3s ease 1s forwards;
                }
                &.y3 {
                    -webkit-animation: fadeIn 0.4s ease 1s forwards;
                }
                &.y4 {
                    -webkit-animation: fadeIn 0.5s ease 1s forwards;
                }
            }
            .circle {
                &.c1 {
                    -webkit-animation: showcircle 0.3s ease 1s forwards;
                }
                &.c2 {
                    -webkit-animation: showcircle 0.3s ease 1.15s forwards;
                }
                &.c3 {
                    -webkit-animation: showcircle 0.3s ease 1.3s forwards;
                }
                &.c4 {
                    -webkit-animation: showcircle 0.3s ease 1.45s forwards;
                }
                &.c5 {
                    -webkit-animation: showcircle 0.3s ease 1.6s forwards;
                }
                &.c6 {
                    -webkit-animation: showcircle 0.3s ease 1.75s forwards;
                }
                &.c7 {
                    -webkit-animation: showcircle 0.3s ease 1.9s forwards;
                }
                &.c8 {
                    -webkit-animation: showcircle 0.3s ease 2.15s forwards;
                }
                &.c9 {
                    -webkit-animation: showcircle 0.3s ease 2.3s forwards;
                }
            }
        }
        p {
            span {
                color: #ff3434;
                font-size: px2rem(48);
            }
        }
        .category-list {
            position: relative;
            width: px2rem(404);
            height: px2rem(480);
            left: 50%;
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            margin-top: px2rem(140);
        }
        .circle {
            position: absolute;
            background-color: #f0337e;
            width: px2rem(170);
            height: px2rem(170);
            border-radius: 100%;
            transform: scale(0);
            p {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                -webkit-transform: translate(-50%,-50%);
                text-align: center;
                display: block;
                font-size: px2rem(20);
                color: #333;
                span {
                    color: #333;
                    font-size: px2rem(20);
                }
                .pencent {
                    color: #fff;
                    height: px2rem(30);
                    line-height: px2rem(30);
                }
            }
            &.c1 {
                top: 0;
                left: px2rem(60);
            }
            &.c2 {
                width: px2rem(144);
                height: px2rem(144);
                top: px2rem(40);
                right: 0;
                background-color: #eabc20;
            }
            &.c3 {
                width: px2rem(130);
                height: px2rem(130);
                top: px2rem(168);
                left: px2rem(150);
                background-color: #aeb22f;
            }
            &.c4 {
                width: px2rem(120);
                height: px2rem(120);
                top: px2rem(162);
                left: 0;
                background-color: #e97b30;
            }
            &.c5 {
                width: px2rem(110);
                height: px2rem(110);
                top: px2rem(220);
                right: 0;
                background-color: #d84ece;
            }
            &.c6 {
                width: px2rem(100);
                height: px2rem(100);
                bottom: px2rem(68);
                left: px2rem(190);
                background-color: #25ab9a;
            }
            &.c7 {
                width: px2rem(94);
                height: px2rem(94);
                top: px2rem(296);
                left: px2rem(74);
                background-color: #3498c2;
            }
            &.c8 {
                width: px2rem(86);
                height: px2rem(86);
                bottom: 0;
                left: px2rem(120);
                background-color: #9a5ae2;
            }
            &.c9 {
                width: px2rem(76);
                height: px2rem(76);
                left: px2rem(24);
                bottom: px2rem(6);
                background-color: #488ec9;
            }
        }
        .words-img {
            position: absolute;
            bottom: px2rem(242);
            left: 50%;
            transform: translateX(-110%);
            -webkit-transform: translateX(-110%);
            width: px2rem(225);
            height: px2rem(120);
        }
        .person-img {
            position: absolute;
            bottom: px2rem(90);
            left: 50%;
            margin-left: px2rem(-10);
            display: block;
            width: px2rem(199);
            height: px2rem(339);
        }
        .you {
            position: absolute;
            bottom: 0;
            left: 50%;
            display: block;
            z-index: 20;
            opacity: 0;
            &.y1 {
                margin-left: px2rem(-216);
                bottom: px2rem(57);
                width: px2rem(206);
                height: px2rem(159);
            }
            &.y2 {
                bottom: px2rem(214);
                margin-left: px2rem(168);
                width: px2rem(147);
                height: px2rem(132);
            }
            &.y3 {
                bottom: px2rem(152);
                margin-left: px2rem(202);
                width: px2rem(142);
                height: px2rem(123);
                transform: rotate(15deg);
                -webkit-transform: rotate(15deg);
            }
            &.y4 {
                bottom: px2rem(68);
                margin-left: px2rem(210);
                width: px2rem(96);
                height: px2rem(72);
            }
        }
    }
    &.page9 {
        &.swiper-slide-active {
            .customer {
                &.cus1 {
                    -webkit-animation: fadeIn 0.1s ease 1s forwards;
                }
                &.cus2 {
                    -webkit-animation: fadeIn 0.3s ease 1s forwards;
                }
                &.cus3 {
                    -webkit-animation: fadeIn 0.5s ease 1s forwards;
                }
                &.cus4 {
                    -webkit-animation: fadeIn 0.7s ease 1s forwards;
                }
                &.cus5 {
                    -webkit-animation: fadeIn 0.8s ease 1s forwards;
                }
            }
        }
        p {
            span {
                font-size: px2rem(48);
                color: #ff4433;
            }
        }
        .customer {
            display: flex;
            margin-left: 16%;
            align-items: center;
            margin-bottom: px2rem(15);
            max-width: px2rem(750);
            opacity: 0;
            -webkit-opacity: 0;
            display: -webkit-flex;
            -webkit-align-items: center;
            .top-icon {
                display: block;
                width: px2rem(79);
                height: px2rem(86);
                background: url("../../images/top-bg.png") no-repeat;
                background-size: 100% 500%;
                &.top1 {
                    background-position: 0 0;
                }
                &.top2 {
                    background-position: 0 25%;
                }
                &.top3 {
                    background-position: 0 50%;
                }
                &.top4 {
                    background-position: 0 75%;
                }
                &.top5 {
                    background-position: 0 100%;
                }
            }
            .head-icon {
                display: block;
                width: px2rem(100);
                height: px2rem(100);
                border-radius: 50%;
                margin-left: px2rem(60);
                margin-right: px2rem(60);
            }
            .info {
                flex: 1;
                -webkit-flex: 1;
                height: px2rem(74);
                overflow: hidden;
                p {
                    margin: 0;
                    text-align: left;
                    font-size: px2rem(24);
                    color: #ffa21d;
                    line-height: px2rem(34);
                    span {
                        font-size: px2rem(36);
                        color: #f8d218;
                    }
                }
            }
        }
        .person-img {
            bottom: px2rem(66);
            left: 50%;
            margin-left: px2rem(-300);
            width: px2rem(308);
            height: px2rem(271);
        }
        .words-img {
            bottom: px2rem(218);
            left: 50%;
            transform: translateX(-5%);
            -webkit-transform: translateX(-5%);
        }
    }
}
.foot-img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: px2rem(190);
    background-image: url("../../images/footbg.png");
    background-size: 100% auto;
    z-index: 2;
}
.next-page {
    position: absolute;
    bottom: px2rem(26);
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    display: block;
    width: px2rem(94);
    height: px2rem(50);
    z-index: 22;
    -webkit-animation: Arrow 1s both 1s infinite;
    animation: Arrow 1s both 1s infinite;
}
@-webkit-keyframes Arrow {
    0% {
        bottom: px2rem(36);
        opacity: 1;
    }
    100% {
        bottom: px2rem(26);
        opacity: 0;
    }
}
@keyframes Arrow {
    0% {
        bottom: px2rem(36);
        opacity: 1;
    }
    100% {
        bottom: px2rem(26);
        opacity: 0;
    }
}
@-webkit-keyframes showcircle {
    0% {
        -webkit-transform: scale(0);
    }
    70% {
        -webkit-transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@keyframes showcircle {
    0% {
        transform: scale(0);
    }
    70% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
.popup {
    .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: 0.7;
    }
    .title {
        padding-top: px2rem(40);
        padding-bottom: px2rem(40);
        text-align: center;
        font-size: px2rem(36);
        color: #333;
    }
    .cnt {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        width: px2rem(540);
        height: px2rem(398);
        -webkit-border-radius: px2rem(13);
        border-radius: px2rem(13);
        background-color: #fff;
        z-index: 99;
        .ipt-num {
            padding-left: px2rem(30);
            margin-top: px2rem(50);
            margin-bottom: px2rem(46);
            height: px2rem(98);
            input {
                padding-left: px2rem(16);
                font-size: px2rem(34);
                width: px2rem(480);
                height: px2rem(60);
                -webkit-border-radius: px2rem(10);
                border-radius: px2rem(10);
                background-color: #fff;
                border: 1px solid #9da0a0;
            }
        }
        .err {
            span {
                display: inline-block;
                margin-right: px2rem(18);
                width: px2rem(24);
                height: px2rem(24);
                line-height: px2rem(24);
                -webkit-border-radius: 50%;
                border-radius: 50%;
                color: #fff;
                background-color: #ff4c4c;
                text-align: center;
            }
            margin-top: px2rem(14);
            color: #ff4c4c;
            font-size: px2rem(24);
        }
        .foot {
            display: flex;
            font-size: px2rem(32);
            border-top: 1px solid #D9D9D9;
            align-items: center;
            display: -webkit-flex;
            -webkit-align-items: center;
            a {
                display: block;
                flex: 1;
                -webkit-flex: 1;
                height: px2rem(88);
                text-align: center;
                line-height: px2rem(88);
                color: #0e8c5a;
                &.cancel {
                    border-right: 1px solid #D9D9D9;
                }
            }
        }
    }
}
.tips-pop {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    font-size: px2rem(30);
    color: #fff;
    width: px2rem(480);
    height: px2rem(100);
    line-height: px2rem(100);
    text-align: center;
    -webkit-border-radius: px2rem(50);
    border-radius: px2rem(50);
    background-color: #000;
    opacity: .7;
    -webkit-opacity: .7;
    z-index: 99;
}
/*
 * share page
 */
.swiper-container {
    &.share {
        padding-top: px2rem(74);
        z-index: 1;
        .book {
            display: block;
            width: px2rem(332);
            height: px2rem(463);
            margin: auto;
            z-index: 2;
        }
        p {
            margin-bottom: px2rem(65);
            color: #fff;
            font-size: px2rem(24);
            text-align: center;
            span {
                //              font-size: px2rem(48);
                color: #ff3434;
            }
        }
        .try {
            display: block;
            margin: px2rem(80) auto auto;
            color: #fff;
            font-size: px2rem(30);
            text-align: center;
            width: px2rem(480);
            height: px2rem(100);
            line-height: px2rem(100);
            -webkit-border-radius: px2rem(50);
            -moz-border-radius: px2rem(50);
            border-radius: px2rem(50);
            background-color: #f63;
            z-index: 20;
        }
        .person-img {
            display: block;
            width: px2rem(203);
            height: px2rem(384);
            position: absolute;
            left: 50%; //          transform: translateX(-110%);
            margin-left: px2rem(-280);
            bottom: px2rem(110);
            z-index: 20;
        }
        .house-img {
            display: block;
            width: px2rem(307);
            height: px2rem(189);
            position: absolute;
            bottom: px2rem(155);
            left: 50%;
            transform: translateX(-25%);
            -webkit-transform: translateX(-25%);
        }
        .words-img {
            position: absolute;
            width: px2rem(330);
            height: px2rem(114);
            bottom: px2rem(384);
            left: 50%;
            transform: translateX(-25%);
            -webkit-transform: translateX(-25%);
        }
        .s1 {
            background-color: #fff;
            -webkit-animation: showstart 3s both 3s infinite;
        }
    }
}
/*
 * stars bulingbuling
 */
.stars {
    position: absolute; //  border: 30px solid red;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}
.star {
    position: absolute;
    top: px2rem(50);
    left: px2rem(50);
    display: block;
    width: px2rem(4);
    height: px2rem(4);
    border-radius: 100%;
    background-color: #fff;
    &.s0 {
        top: px2rem(20);
        left: px2rem(350);
    }
    &.s9 {
        top: px2rem(100);
        left: px2rem(550);
    }
    &.s1 {
        background-color: #fff;
        -webkit-animation: showstart 3s both 3s infinite;
    }
    &.s2 {
        top: px2rem(350);
        left: px2rem(200);
        background-color: #ccc;
        -webkit-animation: Arrow 3s both 5s infinite;
    }
    &.s3 {
        top: px2rem(150);
        right: px2rem(200);
        background-color: #666;
        -webkit-animation: showstart 3s both 6s infinite;
    }
    &.s4 {
        top: px2rem(350);
        left: 0;
        background-color: #fff;
        -webkit-animation: showstart 2s both 3s infinite;
    }
    &.s5 {
        width: px2rem(4);
        height: px2rem(4);
        top: px2rem(500);
        left: px2rem(250);
        background-color: #fff;
        -webkit-animation: showstart 3s both 5s infinite;
    }
    &.s6 {
        width: px2rem(8);
        height: px2rem(8);
        top: px2rem(550);
        left: px2rem(450);
        background-color: #fff;
        -webkit-animation: showstart 3s both 8s infinite;
    }
    &.s7 {
        width: px2rem(8);
        height: px2rem(8);
        top: px2rem(680);
        left: px2rem(580);
        background-color: #fff;
        -webkit-animation: showstart 5s both 7s infinite;
    } 
}
@keyframes showstart {
    0% {
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: .8;
    }
}
@-webkit-keyframes showstart {
    0% {
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: .8;
    }
}
.move-star {
    position: absolute;
    top: 0;
    left: px2rem(-100);
    width: px2rem(48);
    height: px2rem(36);
    z-index: 0;
    &.ms1 {
        -webkit-animation: showstars 3s linear 3s infinite;
    }
    &.ms2 {
        top: px2rem(250);
        -webkit-animation: showstars 2s linear 1s infinite;
    }
    &.ms3 {
        top: px2rem(750);
        -webkit-animation: showstars 2s linear 2s infinite;
    }
}
@-webkit-keyframes showstars {
    0% {
        -webkit-transform: translate(0,0);
    }
    100% {
        -webkit-transform: translate(2000%,2000%);
    }
}
@keyframes showstars {
    0% {
        transform: translate(0,0);
    }
    100% {
        transform: translate(2000%,2000%);
    }
}
